import { View, Text, Image } from '@tarojs/components'
import React, { useState } from 'react'
import Taro from '@tarojs/taro'
import './index.scss'

const Detail = () => {
  const [isLiked, setIsLiked] = useState(false)

  const food = {
    id: '1',
    name: '香辣牛肉面',
    price: 28,
    rating: 4.5,
    ratingCount: 328,
    distance: '500m',
    image: 'https://example.com/noodles.jpg',
    merchant: {
      name: '老王牛肉面馆',
      avatar: 'https://example.com/avatar.jpg',
      openTime: '10:00-21:00'
    }
  }

  const handleBack = () => {
    Taro.navigateBack()
  }

  const handleShare = () => {
    // 处理分享逻辑
  }

  const handleLike = () => {
    setIsLiked(!isLiked)
  }

  return (
    <View className='detail'>
      <View className='detail__header'>
        <Text 
          className='fa-solid fa-arrow-left' 
          onClick={handleBack}
        />
        <View className='detail__actions'>
          <Text 
            className={`fa-solid fa-heart detail__action ${isLiked ? 'detail__action--active' : ''}`}
            onClick={handleLike}
          />
          <Text 
            className='fa-solid fa-share detail__action'
            onClick={handleShare}
          />
        </View>
      </View>

      <Image className='detail__image' src={food.image} mode='aspectFill' />

      <View className='detail__content'>
        <View className='detail__info'>
          <Text className='detail__tag'>必吃榜</Text>
          <Text className='detail__name'>{food.name}</Text>
          <View className='detail__meta'>
            <View className='detail__rating'>
              <Text className='fa-solid fa-star' />
              <Text>{food.rating}</Text>
              <Text className='detail__rating-count'>({food.ratingCount})</Text>
            </View>
            <Text className='detail__price'>¥{food.price}</Text>
            <View className='detail__distance'>
              <Text className='fa-solid fa-location-dot' />
              <Text>{food.distance}</Text>
            </View>
          </View>
        </View>

        <View className='detail__merchant'>
          <Image className='detail__merchant-avatar' src={food.merchant.avatar} mode='aspectFill' />
          <View className='detail__merchant-info'>
            <Text className='detail__merchant-name'>{food.merchant.name}</Text>
            <Text className='detail__merchant-time'>{food.merchant.openTime}</Text>
          </View>
          <Text className='detail__merchant-btn'>进店看看</Text>
        </View>
      </View>

      <View className='detail__footer'>
        <View className='detail__button detail__button--outline'>加入收藏</View>
        <View className='detail__button detail__button--primary'>立即点餐</View>
      </View>
    </View>
  )
}

export default Detail 